$f: 19.2;
img{
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.common_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.home{
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.foot{
  position: relative;
  z-index: 5;
  margin-top: -38/$f+vw;
}
.common_more{
  border-radius: 20/$f+vw;
  border: 1.264px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 100%, rgba(255, 255, 255, 0.00) 100%), #0F77FF;
  box-shadow: 0px 0px 0px 1.264px #0F77FF, 0px 1.264px 2.528px 0px rgba(12, 43, 100, 0.20);
  display: flex;
  padding: 10/$f+vw 35/$f+vw 10/$f+vw 36/$f+vw;
  justify-content: center;
  align-items: center;
  width: fit-content;
  color: #fff;
  line-height: 1.35;
  cursor: pointer;
  text-transform: capitalize;
  transition: .6s ease;
  &:hover{
    color: #5D5D5D;
    background: #C6DFFF;
    box-shadow: none;
  }
}

.bg1{
  position: absolute;
  width: 1994/$f+vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  top: 1373/$f+vw;
  pointer-events: none;
  img{
    width: 100%;
  }
}

.bg2{
  position: absolute;
  width: 3162/$f+vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  top: 2066/$f+vw;
  pointer-events: none;
  img{
    width: 100%;
  }
}

.bg3{
  position: absolute;
  width: 3802/$f+vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  top: 3200/$f+vw;
  pointer-events: none;
  img{
    width: 100%;
  }
}

.bg4{
  position: absolute;
  width: 1988/$f+vw;
  left: 170/$f+vw;
  z-index: 1;
  top: 0/$f+vw;
  pointer-events: none;
  img{
    width: 100%;
  }
}
.bg5{
  position: absolute;
  width: 555/$f+vw;
  left: -222/$f+vw;
  z-index: 1;
  top: 493/$f+vw;
  pointer-events: none;
  img{
    width: 100%;
  }
}
.bg6{
  position: absolute;
  width: 513/$f+vw;
  right: 0/$f+vw;
  z-index: 1;
  top: 686/$f+vw;
  pointer-events: none;
  img{
    width: 100%;
  }
}
@keyframes yAnimate {
  0%{
    transform: translateY(40px);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.main{
  position: relative;
  z-index: 2;
  .section1{
    padding: 278/$f+vw 135/$f+vw 276/$f+vw 160/$f+vw;
    .display{
      display: flex;
      justify-content: space-between;
      .l{
        margin: 49/$f+vw 0 0 0;
        .l_list{
          display: none;
          &.on{
            display: block;
            animation: yAnimate .6s ease forwards;
          }
        }
        .title{
          color: #000;
          font-style: normal;
          font-weight: 500;
          line-height: 100/$f+vw; /* 104.167% */
          text-transform: capitalize;
          margin: 0 0 24/$f+vw;
        }
        .p2{
          color: #000;
          font-style: normal;
          font-weight: 400;
          margin: 0 0 40/$f+vw;
        }
      }
      .r{
        width: 762/$f+vw;
        height: 686/$f+vw;
        .rSwiper{
          width: 100%;
          height: 100%;
          .swiper-slide{
            opacity: 0!important;
            transition: 1s;
            &.swiper-slide-active{
              opacity: 1!important;
            }
            img{
              width: 100%;
            }
          }
        }
      }
    }
    .swiper-pagination{
      position: static;
      width: fit-content;
      margin: -50/$f+vw auto 0;
      span{
        background: rgba(116, 116, 119,0.4);
        opacity: 1!important;
        margin: 0 24/$f+vw 0 0!important;
        width: 10/$f+vw;
        height: 10/$f+vw;
        transition: .6s ease;
        &.swiper-pagination-bullet-active{
          background: #297EF7;
        }
        &:last-child{
          margin: 0!important;
        }
      }
    }
  }
  .section2{
    padding: 0 0 213/$f+vw 0;
    .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 260/$f+vw 0 160/$f+vw;
      .img{
        width: 760/$f+vw;
        height: 460/$f+vw;
        border-radius: 20/$f+vw;
        overflow: hidden;
        &:hover{
          img{
            transform: scale(1.05);
          }
        }
        img{
          width: 100%;
          height: 100%;
          transition: .6s ease;
        }
      }
      .text{
        width: 647/$f+vw;
        .p1{
          color: #000;
          font-style: normal;
          font-weight: 400;
          line-height: 142.82%; /* 68.554px */
          text-transform: capitalize;
          margin: 0 0 24/$f+vw;
        }
        .p2{
          margin: 0 0 40/$f+vw;
          .list{
            display: flex;
            align-items: center;
            &:not(:last-child) {
              margin: 0 0 5/$f+vw;
            }
            span{
              width: 7/$f+vw;
              height: 7/$f+vw;
              border-radius: 50%;
              background: #000;
              margin: 0 15/$f+vw 0 0;
            }
          }
        }

      }
    }
    .content{
      margin: 154/$f+vw 0 0 0;
      padding: 0 260/$f+vw;
      .headline{
        text-align: center;
        .p1{
          color: #000;
          font-style: normal;
          font-weight: bold;
          line-height: 142.82%; /* 68.554px */
          text-transform: capitalize;
          margin: 0 0 24/$f+vw;
        }
        .p2{
          width: 1109/$f+vw;
          color: #000;
          font-style: normal;
          font-weight: 300;
          line-height: 36/$f+vw; /* 150% */
          margin: 0 auto 40/$f+vw;
        }
        .common_more{
          margin: auto;
        }
      }
      .flex{
        display: flex;
        justify-content: center;
        margin: 80/$f+vw 0 0 0;
        .item{
          width: 483/$f+vw;
          height: 568/$f+vw;
          border-radius: 20/$f+vw;
          border: 1px solid #FFF;
          background: rgba(255, 255, 255, 0.30);
          backdrop-filter: blur(32.6074104309082px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          position: relative;
          box-shadow: -25.244px -31.556px 52.593px rgba(110, 163, 242, 0.12);
          &:first-child{
            left: 30/$f+vw;
          }
          &:last-child{
            left: -30/$f+vw;
            .img{
              position: relative;
              left: -30/$f+vw;
            }
          }
          &:nth-child(2) {
            z-index: 2;
          }
          &:not(:nth-child(2)) {
            margin: 42/$f+vw 0 0 0;
          }
          .p1{
            color: #000;
            text-align: center;
            font-size: 29/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: 35.342/$f+vw; /* 120% */
            text-transform: capitalize;
            margin: 0 0 17/$f+vw;
          }
          .more{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0 10/$f+vw;
            margin: 0 0 40/$f+vw;
            p{
              color: #000;
              font-style: normal;
              font-weight: 300;
              line-height: 25.56/$f+vw; /* 135% */
              letter-spacing: 0.947px;
            }
            svg{
              width: 13/$f+vw;
              height: 11/$f+vw;
            }
          }
          .img{
            width: 346/$f+vw;
            height: 350/$f+vw;
            img{
              width: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  }

  .section3{
    padding: 0 260/$f+vw 133/$f+vw 280/$f+vw;
    h1{
      text-align: center;
      margin-bottom: 108/$f+vw;
    }
    .flex1{
      margin: 0 0 190/$f+vw;
      .img{
        width: 572/$f+vw;
        height: 375/$f+vw;
      }
    }
    .flex2{
      padding: 0 226/$f+vw 0 0;
      justify-content: space-between;
      margin: 0 0 17/$f+vw;
      .img{
        width: 288/$f+vw;
        height: 685/$f+vw;
      }
      .r{
        position: relative;
        left: 57/$f+vw;
        margin: 52/$f+vw 0 0 0;
      }
    }
    .flex3{
      .img{
        width: 583/$f+vw;
        height: 599/$f+vw;
      }
      .r{
        margin: 147/$f+vw 0 0 0;
      }

    }
    .flex{
      display: flex;
      gap: 0 150/$f+vw;
      &:nth-child(2n) {
        flex-direction: row-reverse;
      }
      .img{
        &:hover{
          img{
            transform: scale(1.05);
          }
        }
        img{
          width: 100%;
          transition: .6s ease;
        }
      }
      .r{
        width: 700/$f+vw;
        .p1{
          color: #000;
          font-style: normal;
          font-weight: 400;
          line-height: 142.82%; /* 68.554px */
          text-transform: capitalize;
          margin: 0 0 12/$f+vw;
        }
        .p2{
          color: #000;
          font-style: normal;
          font-weight: 400;
          line-height: 142.82%; /* 34.277px */
          text-transform: capitalize;
          margin: 0 0 24/$f+vw;
        }
        .p3{
          color: #000;
          font-style: normal;
          font-weight: 300;
          line-height: 30/$f+vw; /* 150% */
          margin: 0 0 40/$f+vw;
        }
      }
    }
  }

  .section4{
    padding: 0 160/$f+vw 103/$f+vw 160/$f+vw;
    .title{
      color: #000;
      font-style: normal;
      font-weight: bold;
      line-height: 142.82%; /* 68.554px */
      text-transform: capitalize;
      margin: 0 0 80/$f+vw;
      text-align: center;
    }
    .content{
      .item{
        width: 100%;
        height: 465/$f+vw;
        border-radius: 20/$f+vw;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.30);
        box-shadow: -6px 5px 2px 0px rgba(255, 255, 255, 0.20) inset;
        backdrop-filter: blur(28.67752456665039px);
        display: flex;
        align-items: center;
        gap: 0 90/$f+vw;
        padding: 40/$f+vw;
        &:not(:last-child) {
          margin: 0 0 80/$f+vw;
        }

        &:nth-child(2n) {
          flex-direction: row-reverse;
          gap: 0 158/$f+vw;
        }
        .img{
          width: 709/$f+vw;
          height: 385/$f+vw;
          border-radius: 20/$f+vw;
          overflow: hidden;
          &:hover{
            img{
              transform: scale(1.05);
            }
          }
          img{
            width: 100%;
            height: 100%;
            transition: .6s ease;
          }
        }
        .r{
          width: 596/$f+vw;
          .p1{
            color: #000;
            font-style: normal;
            font-weight: 400;
            text-transform: capitalize;
            margin: 0 0 24/$f+vw;
          }
          .p2{
            color: #000;
            font-style: normal;
            font-weight: 300;
            line-height: 30/$f+vw; /* 150% */
            margin: 0 0 40/$f+vw;
          }
        }
      }
    }
  }

  .section5{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 151/$f+vw 0 250/$f+vw;
    .text{
      text-align: center;
      .p1{
        color: #171717;
        font-style: normal;
        font-weight: bold;
        text-transform: capitalize;
        margin: 0 0 40/$f+vw;
      }
      .common_more{
        margin: auto;
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .bg3{
    top: 198.666667vw;
    width: 500vw;
  }
  .common_more{
    border-radius: 15px;
    padding: 5px 17px;
  }
 .main{
   .section1{
     padding: 100px 5% 50px 5%;
     .display{
       flex-direction: column-reverse;
       .r{
         width: 70%;
         height: auto;
         margin: auto;
       }
       .l{
         width: 100%;
         .title{
           line-height: 40px;
           margin: 0 0 15px;
         }
         .p2{
           margin: 0 0 15px;
         }
       }
     }
     .swiper-pagination{
       margin: 30px auto 0;
       span{
         width: 7px;
         height: 7px;
         margin: 0 10px 0 0!important;
         &:last-child{
           margin: 0!important;
         }
       }
     }

   }
   .section2{
     padding: 0 5% 50px 5%;
     .top{
       flex-direction: column;
       padding: 0;
       .img{
         width: 100%;
         height: auto;
         border-radius: 10px;
       }
       .text{
         width: 100%;
         margin: 25px 0 0 0;
         .p1{
           margin: 0 0 15px;
         }
         .p2{
           margin: 0 0 20px;
           .list{
             span{
               display: none;
             }
           }
         }
       }
     }
     .content{
       margin: 45px 0 0 0;
       padding: 0;
       .headline{
         .p1{
           margin: 0 0 15px;
         }
         .p2{
           line-height: 25px;
           width: 100%;
           margin: 0 0 20px;
         }
       }
       .flex{
         flex-direction: column;
         gap: 25px 0;
         margin: 30px 0 0 0;
         .item{
           width: 100%;
           left: 0!important;
           margin: 0!important;
           padding: 30px 0 0 0;
           height: auto;
           &>div{
             width: 100%;
           }
           .p1{
             font-size: 22px;
             line-height: 25px;
             margin: 0 0 15px;
           }
           .more{
             gap: 0 10px;
             margin: 0 0 15px;
             p{
               line-height: unset;
             }
             svg{
               width: 10px;
               height: 10px;
             }
           }
           .img{
             width: 70% !important;
             height: 300px;
             margin: auto;
             img{
               width: 100%;
             }
           }
         }
       }
     }
   }
   .section3{
     padding: 50px 5%;
     h1{
      margin-bottom: 60px;
     }
     .flex{
       flex-direction: column!important;
       margin: 0 0 50px 0!important;
       .img{
         width: 50% !important;
         height: auto;
         margin: auto;
       }
       .r{
         width: 100%;
         margin: 50px 0 0 0;
         .p1{
           margin: 0 0 15px;
         }
         .p2{
           margin: 0 0 15px;
         }
         .p3{
           line-height: 25px;
           margin: 0 0 15px;
         }
       }
     }
     .flex2{
      padding-right: 0;
      .r{
        left: 0;
      }
     }
   }
   .section4{
     padding:0 5% 65px 5%;
     .title{
       margin: 0 0 30px;
     }
     .content{
       .item{
         height: auto;
         flex-direction: column!important;
         padding: 0;
         &:not(:last-child) {
           margin: 0 0 45px;
         }
         .img{
           width: 100%;
           height: auto;
         }
         .r{
           width: 100%;
           margin: 25px 0 0 0;
           .p1{
             margin: 0 0 15px;
           }
           .p2{
             line-height: 25px;
             margin: 0 0 15px;
           }
         }
       }
     }
   }
   .section5{
     padding: 50px 0 120px;
     .text{
       .p1{
         margin: 0 0 15px;
       }
     }
   }
 }

  .foot{
    margin-top: -50px;
  }
}